<template>
	<view class="container">
		<view class="header">
			基本信息
		</view>
		<view class="ines">
			<view class="inesBlock" @click="handlebomShow">
				<view>关联BOM单号</view>
				<view >
					<view v-if="bomObject.bomCode">{{bomObject.bomCode}}</view>
					<view v-else style="color: #999999;">请选择BOM单号</view>
				</view>
			</view>
			<view class="inesBlock">
				<view>生产类型</view>
				<view class="inesTypes">
					<view v-if="obj.type">{{obj.type}}</view>
					<view v-else style="color: #999999;">请选择类型</view>
				</view>
			</view>
			<view class="inesBlock" v-if="obj.id==1">
				<view>预计加工数量</view>
				<view>
					<input  style="text-align: end;font-size: 24rpx;" type="number" placeholder="请输入预加工数量"
						placeholder-style="font-size:24rpx;" v-model="bomObject.count"/>
				</view>
			</view>
			<view class="inesBlock" style="border: none;">
				<view>生产货品</view>
				<view style="color: #999999 ;">
					<view>{{bomObject.productName?bomObject.productName:'请输入名称'}}</view>
				</view>
			</view>




		</view>
		<view class="material" v-if="bomObject.productName">
			物料信息
		</view>
		<view class="all" v-if="bomObject.productName">
			<view class="materialBlock">
				<view>物料</view>
				<view style="color: #999999 ;">{{bomObject.productName|| '暂无'}}</view>
			</view>
			<view class="materialBlock">
				<view>物料数量</view>
				<view style="color: #999999 ;">{{bomObject.bomItemsRespVOList[0].count || 0}}</view>
			</view>
			<view class="materialBlock" style="border: none;">
				<view>备注</view>
				<view style="color: #999999 ;" >{{bomObject.bomItemsRespVOList[0].remark|| '暂无'}}</view>
			</view>
		</view>
		<view class="submit">
			<u-button :disabled="!bomObject.bomCode" :loading='loading' :custom-style="customStyleBtn1"
				@click="submit">确认新增</u-button>
		</view>
		<u-picker :show="show" :columns="types" keyName="label" @cancel="show=false"
			@confirm="handeleConfirm"></u-picker>

	</view>
</template>

<script>
	import {
		bomGetDetail,
		createByBom
	} from '@/api/store.js'
	export default {
		data() {
			return {
				bomShow: false,
				show: false,
				placeholderStyle: {
					fontSize: '24rpx'
				},
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				loading: false,
				obj: {
					id: '', //类型id
				},
				types: [ //生产类型
					[{
							id: '1',
							label: '组合'
						},
						{
							id: '2',
							label: '拆分'
						},
					]
				],
				bomObject: [], //选择的BOM信息
			}
		},
		onLoad() {
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('bom', this.handleCustomEventBind);
		},
		methods: {
			// 提交
			submit() {
				if(this.obj.id==''){
					uni.showToast({
						title:'请选择类型',
						icon:'none'
					})
					return
				}
				if(this.bomObject.count==''){
					uni.showToast({
						title:'请选择生产数量',
						icon:'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '提交后无法修改和删除，请仔细核对信息？',
					success: res => {
						if (res.confirm) {
							this.loading = true
							let data = {
								bomId: this.bomObject.id,
								estimatedCount:this.bomObject.count,
								productId:this.bomObject.skuid,
								productName: this.bomObject.productName,
								type:this.obj.id,
							}
							createByBom(data).then(res=>{
								res.code==0 && uni.navigateBack()
								res.code==0 && uni.showToast({
									title:'操作成功',
									icon:'none'
								})
								res.code!=0 && uni.showToast({
									title:res.msg,
									icon:'none'
								})
								res.code==0 && uni.$off('bom', this.handleCustomEventBind);
								this.loading = false
							})
						}
					}
				});
			},
			// 生产类型
			handeleConfirm(e) {
				this.obj.type = e.value[0].label
				this.obj.id = e.value[0].id
				this.show = false
			},
			handlebomShow() {
				uni.navigateTo({
					url: '/pages/work/produce/associatedBOM'
				})
			},
			// 接收页面传参数据
			handleCustomEvent(val) {
				this.getBomDetail(val.data.id)
			},
			async getBomDetail(id) {
				let res = await bomGetDetail({
					id: id
				})
				console.log('数据:',res.data.type);
				this.bomObject = {...this.bomObject,...res.data}
				if(res.data.type==1){
					this.obj.type = '组合'
				}else{
					this.obj.type = '拆分'
				}
				
				this.obj.id = res.data.type
			}
		}
		
	}
</script>

<style scoped>
	.inesTypes {}

	.placeholderClass {
		font-size: 24rpx;
	}

	.submit {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}

	.all {
		width: 100%;
		min-height: 300rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
	}

	.materialBlock {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E8E8E8;
	}

	.material {
		width: 100%;
		height: 72rpx;
		font-size: 24rpx;
		padding: 0 31rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.inesBlock {
		width: 688rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #E8E8E8;
		font-size: 24rpx;
	}

	.ines {
		width: 100%;
		min-height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;

	}

	.header {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		padding: 0 38rpx;
		box-sizing: border-box;
	}

	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
		font-size: 24rpx;
	}
</style>